昨天提到，Props不能從內部改變，但是可以從外面改變，到底是甚麼意思呢？
下面的程式碼是一個「傳來的props的值是一個state」的範例，我們先一眼掠過就好!
也可以參考codepen連結

function Hello(props) {
  return(
    <div>
      <h1>嗨,{props.name}</h1>
      <p>(值從props來，固定不動，輸入的)</p>
    </div>    
  ) 
}
function Accept(props) {
    return(
    <div>
      <h1>你現在有,{props.number}元</h1>
      <p>(接收的值是一樣從props傳來來,但這個props的值本身是一個state)</p>
    </div>    
  )
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
        add:100
    }
    this.addMoney = this.addMoney.bind(this);
  }
  addMoney() {
    this.setState({
      add: this.state.add + 100
    })
  }
  render() {
    return (
      <div>
        <Hello name='andy'/>
        <Accept number={this.state.add}/> 
        <p onClick={this.addMoney}>更多錢</p>
      </div>
    )
  }
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App/>,
);

並且會呈現以下的效果(當我按下更多錢的時候，500會變成600)

嗨,andy
(值從props來，固定不動，輸入的)

你現在有,500元
(接收的值是一樣從props傳來來,但這個props的值本身是一個state)

更多錢

我們逐步來觀看

1. 我建立了兩個component，一個叫做Hello，我打算拿它來呈現不需要改變的資料；一個是Accept，要拿來呈現會被改變的資料。到目前為止，除了文字的敘述不同以外，component的內容基本上是相同的。

function Hello(props) {
  return(
    <div>
      <h1>嗨,{props.name}</h1>
      <p>(值從props來，固定不動，輸入的)</p>
    </div>    
  ) 
}
function Accept(props) {
    return(
    <div>
      <h1>你現在有,{props.number}元</h1>
      <p>(接收的值是一樣從props傳來來,但這個props的值本身是一個state)</p>
    </div>    
  )
}

2. 那就來把這兩個componentrender到畫面上吧。
   其中，Hello跟之前看到的都相同，就是很簡單地放上我們要傳進去值，在這裡是andy。
   而Accept就不一樣了，Accept傳遞的number，是一個用{}括起來的this.state.add，也就是說，他是一個透過react生成的東西。
   (onClick的功用是一個點擊事件，在這裡先不管他，他就是拿來執行動作的)

  render() {
    return (
      <div>
        <Hello name='andy'/>
        <Accept number={this.state.add}/> 
        <p onClick={this.addMoney}>更多錢</p>
      </div>
    )
  }

3. 既然我們用到了state.add，那就來設定一下他的初始值吧，我用constructor幫state設了一個add=100的值，並且綁了this.addMoney

 constructor() {
    super();
    this.state = {
        add:100
    }
    this.addMoney = this.addMoney.bind(this);
  }

4. 那就來看一下addMoney要做甚麼吧！在這裡，我用setState把add加上100

  addMoney() {
    this.setState({
      add: this.state.add + 100
    })
  }

5. 於是，當我呼叫addMoney()這個方法的時候，this.state.add就會加上100，並且把整個this.state.add傳到Accept裡面。

於是乎，成功修改了Props！

參考資料
https://zh-hant.reactjs.org/docs/react-component.html
https://segmentfault.com/a/1190000016376897
https://ithelp.ithome.com.tw/articles/10223754